<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-05-15 13:46:57
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-05-26 10:29:31
 * @FilePath: /XMate-h5/src/views/minutes/components/passwordVerifier/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="flex flex-col items-center justify-center w-screen h-screen gap-4">
    <div class="font-bold text-[18px] mb-8">请输入会议纪要密码</div>
    <van-field
      class="psw-input"
      v-model="password"
      inpute
      input-align="center"
      placeholder="请输入密码"
      maxlength="6"
      clearable
    />

    <div class="w-[160px] mt-8">
      <van-button
        color="#436BFF"
        size="large"
        :disabled="password.length !== 6"
        round
        type="success"
        loading-text="加载中..."
        :loading="isLoading"
        @click="handleConfirm"
      >
        确定
      </van-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { getShareToken } from "@/services/minutes";
import { useMinutesStore } from "@/store/modules/minutes/minutes";
import { showToast, showLoadingToast, closeToast } from "vant";

const store = useMinutesStore();

const emit = defineEmits<{
  (e: "verificationPassed"): void;
}>();

const password = ref("");
const isLoading = ref(false);

async function handleConfirm() {
  const shareId = store.shareId;
  if (shareId === "") {
    showToast("shareId 为空,请检查链接是否正确");
    return;
  }
  isLoading.value = true;
  showLoadingToast({ message: "验证中...", duration: 0 });
  const res = await getShareToken(shareId, password.value);
  isLoading.value = false;
  closeToast();
  const { data: shareToken, code, message } = res;
  if (code !== 0) {
    showToast(message);
    return;
  }
  window.sessionStorage.setItem("shareToken", shareToken);
  window.sessionStorage.setItem("shareId", store.shareId);
  emit("verificationPassed");
}
</script>

<style scoped lang="less">
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  .error-des {
    font-size: 16px;
    color: #595959;
    text-align: center;
  }
  .psw-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .psw-input {
    margin-top: 15px;
    margin-bottom: 32px;
  }
  .confimBtn {
    width: 120px;
    height: 36px;
    margin-top: 12px;
  }
  img {
    width: 200px;
    height: 130px;
    margin-bottom: 30px;
  }
}
</style>
